<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>将页面平均分成四部分</title>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
    <style type="text/css">
        *:not(.main) {
            margin: 10px;
            padding: 0;
        }

        .main {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .blue {
           /*  background-color: #5BC0DE; */
            width: 40%;
            height: 100%;
            float: left;
        }

        .head {
            width: 95%;
            height: 10%;
        }

        .green {
           /*  background-color: #5CB85C; */
            width: 95%;
            height: 80%;
        }

        .foot {
            width: 95%;
            height: 5%;
        }

        .orange {
           /*  background-color: #F0AD4E; */
            width: 57%;
            height: 100%;
            float: left;
        }

        .yellow {
           /*  background-color: #FFC706; */
            width: 95%;
            height: 20%;
        }

        .white {
       /*      background-color: white; */
            width: 98.5%;
            height: 30%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="head">
            <div style="position:absolute;right:100px">
                <label>测点：</label>
                <select style="width:200px;height:30px;border-radius: 5px">
                    <option value="测点1"> 测点1</option>
                    <option value="测点2"> 测点2</option>
                    <option value="测点3"> 测点3</option>
                    <option value="测点4"> 测点4</option>
                    <option value="测点5"> 测点5</option>
                    <option value="测点6"> 测点6</option>
                    <option value="测点7"> 测点7</option>
                    <option value="测点8"> 测点8</option>
                </select>
            </div>
        </div>
        <div class="quarter-div green">
            <div style="width:100%;height:65%;margin:0;">
                <div class="quarter-div blue" style="text-align:center;">
                    <img src="temp/big/keting2.jpg" alt="" width="95%" height="95%" />
                </div>
                <div class="quarter-div orange">
                    <div id="container"style="position:relative;left:0px;width:70%;height:95%;">
                    </div>
                    <div style="position:relative;left:70%;width:30%;bottom:100%;height:95%;">
                        <div style="position:relative;top:10px">
                            <label>均值：</label>
                            <input tyle="text">
                        </div>
                        <div>
                            <label>方差：</label>
                            <input tyle="text">
                        </div>
                        <div>
                            <label>最大值：</label>
                            <input tyle="text">
                        </div>
                        <div>
                            <label>最小值：</label>
                            <input tyle="text">
                        </div>
                        <div>
                            <label>峰峰值：</label>
                            <input tyle="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="quarter-div white">
                <div style="float:left;margin-left:100px">
                    <label>诊断结果：</label>
                    <br>
                    <textarea style="width:300px;height:100px"></textarea>
                </div>
                <div style="float:left;margin-left:100px">
                    <label>诊断判据：</label>
                    <br>
                    <textarea style="width:300px;height:100px"></textarea>
                </div>
                <div style="float:left;margin-left:100px">
                    <label>故障对策：</label>
                    <br>
                    <textarea style="width:300px;height:100px"></textarea>
                </div>
            </div>

        </div>
        <div class="foot">
            <!-- <input type="submit" value="返回" style="background-color: darkgreen;width:120px;color:white;box-shadow: -1px,-2px,-2px,0 #615959;border-radius:3px;font-size:23px;position:absolute;right:100px"> -->
        </div>
    </div>
    <script>
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var base = +new Date();
        var oneDay = 1;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getHours(), now.getMinutes() + 1, now.getSeconds()].join(':'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }

        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '大数据量面积图',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [{
                name: '模拟数据',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                },
                data: data
            }]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>